<template>
    <div class="option-item" @click="selectItem(data)">
      {{ data.name }}
    </div>
  </template>
  
  <script setup>
  defineProps({
    data: Object,
  });
  
  const emit = defineEmits(['select']);
  
  function selectItem(item) {
    emit('select', item);
  }
  </script>
  
  <style scoped>
  .option-item {
    padding: 4px;
    cursor: pointer;
  }
  
  .option-item:hover {
    background-color: #f0f0f0;
  }
  </style>